<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--侧边部门数据-->
      <el-col :xs="9" :sm="6" :md="4" :lg="4" :xl="4">
        <div class="head-container">
          <el-input
            v-model="deptName"
            clearable
            size="small"
            placeholder="输入部门名称搜索"
            prefix-icon="el-icon-search"
            class="filter-item"
          />
        </div>
        <el-tree
          :data="deptDatas"
          :props="defaultProps"
          :expand-on-click-node="false"
          default-expand-all
          :filter-node-method="filterNode"
          @node-click="handleNodeClick"
          ref="tree"
        />
      </el-col>
      <!--用户数据-->
      <el-col :xs="15" :sm="18" :md="20" :lg="20" :xl="20">
        <!--工具栏-->
        <div class="head-container">
          <div v-if="crud.props.searchToggle">
            <!-- 搜索 -->
            <el-input
              placeholder="输入名称或者邮箱搜索"
              style="width: 200px;"
              class="filter-item"
            />
            <rrOperation :crud="crud" />
          </div>
          <crudOperation show="" :permission="permission"/>
        </div>

        <!--表格渲染-->
        <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
          <el-table-column :selectable="checkboxT"  type="selection" width="55" />
          <el-table-column  v-if="columns.visible('userId')" label="唯一编码" prop="userId" />
          <el-table-column  v-if="columns.visible('userName')" label="名称" prop="userName" />
          <el-table-column  v-if="columns.visible('isValid')" label="状态" align="center" prop="isValid">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.isValid"
                :disabled="scope.row.id === user.id "
                active-color="#409EFF"
                inactive-color="#F56C6C"
                active-value="Y"
                inactive-value="N"
              />
            </template>
          </el-table-column>
          <el-table-column  v-if="columns.visible('sysCreateTime')" label="创建日期" prop="sysCreateTime" >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.sysCreateTime,'{y}年{m}月{d}日 {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-permission="['admin']"
            label="操作"
            width="125"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <udOperation
                :data="scope.row"
                :permission="permission"
                :disabled-dle="scope.row.id === user.id"
                :disabled-edit="scope.row.id === user.id"
              />
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination />
      </el-col>
      <!-- 表单组件 -->
      <formDialog />

    </el-row>
  </div>
</template>

<script>

import { getList } from '@/api/system/dept'
import crudUser from '@/api/system/user'
import CRUD, { presenter, header, crud } from '@/components/Crud/crud'
import crudOperation from '@/components/Crud/CRUD.operation'
import pagination from '@/components/Crud/Pagination'
import rrOperation from '@/components/Crud/RR.operation'
import udOperation from '@/components/Crud/UD.operation'
import formDialog from './components/formDialog'
import { mapGetters } from 'vuex'

const defaultCrud = CRUD({ title: '用户管理', url: 'user/list', crudMethod: { ...crudUser }})

export default {
  name: 'USER',
  components: { crudOperation, pagination, rrOperation, udOperation, formDialog },
  mixins: [presenter(defaultCrud), header(), crud()],
  data() {
    return {
      deptName: '',
      deptDatas: null,
      defaultProps: {
        children: 'children',
        label: 'deptName'
      },
      permission: {
        add: ['admin'],
        edit: ['admin'],
        del: ['admin']
      },
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    deptName(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    getDeptDatas() {
      const params = { deptName: this.deptName }
      getList(params).then(res => {
        this.deptDatas = res
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.deptName.indexOf(value) !== -1
    },
    // 切换部门
    handleNodeClick(data) {
      // 参数
      const paramsMap = {
        deptId: ''
      }
      if (data.parentDeptId === '') {
        paramsMap.deptId = ''
      } else {
        paramsMap.deptId = data.deptId
      }
      this.query.params = JSON.stringify(paramsMap)
      this.crud.toQuery()
    },
    checkboxT(row, rowIndex) {
      return row.id !== this.user.id
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  created() {
    this.$nextTick(() => {
      this.getDeptDatas()
      this.crud.optShow = {
        add: true,
        edit: true,
        del: true,
        download: false
      }
    })
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-editor-container {
    padding: 18px 22px 22px 22px;
    background-color: rgb(240, 242, 245);
    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }
</style>
